.view-container {
	.full-abs;
	.flex-wrap-v;
	overflow: hidden;
	background: @defaultBg;
}

main,
.page-wrap {
	.flex-wrap-v;
	height: 100%;
	width: 100%;
	overflow: hidden;
	// 深色页面
	&.is-dark {
		background: @headerDarkBg;
		header {
			.no-line;
			.header-title {
				color: @lightTxtColor;
			}
			.bar-button {
				color: @headerLightBtnColor;
			}
			background: transparent;
		}
	}
}

// main的子标签：header, section, footer
main > section,
.page-wrap > section {
	position: relative;
	.flex-1;
}

.scroll-content {
	position: absolute;
	width: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;

	.scroll {
		position: absolute;
		z-index: 0;
		width: 100%;
	}
}

.scroll-content-x {
	display: block;
	width: 100%;
	overflow: hidden;

	.scroll-x {
		display: table-row;

		.item {
			display: table-cell;
			vertical-align: top;
		}
	}
}

// 文字 保留空白符序列,但是正常地进行换行
.pre-wrap {
	white-space: pre-wrap;
}


/* 突显数字 */
.txt-big1 {
  font-size: @big1;
}

.txt-big2 {
  font-size: @big2;
}

.txt-big3 {
  font-size: @big3;
}

.txt-big4 {
  font-size: @big4;
}

.txt-big5 {
  font-size: @big5;
}

.txt-big1,
.txt-big2,
.txt-big3,
.txt-big4,
.txt-big5 {
	&.is-primary {
		color: @btnBgPrimary;
	}
}

.txt-big1,
.txt-big2,
.txt-big3,
.txt-big4,
.txt-big5 {
  &.is-success {color: @btnBgSuccess;}
}

.txt-big1,
.txt-big2,
.txt-big3,
.txt-big4,
.txt-big5 {
  &.is-warning {color: @btnBgWarning;}
}

.txt-big1,
.txt-big2,
.txt-big3,
.txt-big4,
.txt-big5 {
  &.is-danger {color: @btnBgDanger;}
}

.txt-big1,
.txt-big2,
.txt-big3,
.txt-big4,
.txt-big5 {
  &.is-info {color: @btnBgInfo;}
}

// 突显数字 + 单位
.num-item {
	display: flex;
	align-items: baseline;
	font-size: @l3;
	label {
		padding-right: 10px;
	}
	.unit {
		font-size: @l5;
		opacity: 0.7;
	}
}

// 段落缩进
.text-indent {
	text-indent: 26px;
}
/* 一级标题 */
.txt-h1 {
	font-size: @l1;
	color: @titleColor;
}

/* 二级标题 */
.txt-h2 {
	font-size: @l2;
	color: @titleColor;
}

/* 三级标题 */
.txt-h3 {
	font-size: @l3;
	color: @titleColor;
}

/* 正文描述 */
.txt-desc {
	font-size: @l4;
	color: @descColor;
}

/* 正文备注 */
.txt-info {
	font-size: @l5;
	color: @infoColor;
}

// 辅助文字
// .txt-help {
// 	font-size: @l6;
// 	color: @helpColor;
// }

.txt-h1,
.txt-h2,
.txt-h3,
.txt-desc,
.txt-info {
	&.is-center {
		text-align: center;
	}
	&.is-right {
		text-align: right;
	}
	&.is-light {
		color: @lightTxtColor;
	}
}

.txt-line1,
.txt-line2,
.txt-line3 {
	display: -webkit-box;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
}

.txt-line2 {
	-webkit-line-clamp: 2;
}

.txt-line3 {
	-webkit-line-clamp: 3;
}

.item-status {
	display: inline-block;
	line-height: 20px;
	height: 20px;
	min-width: 50px;
	padding: 0px 10px;
	overflow: hidden;
	border-radius: 5px;
	text-align: center;
	color: @lightTxtColor;
	font-size: @l5;

	&.primary {
		background: @btnBgPrimary;
	}
	&.success {
		background: @btnBgSuccess;
	}
	&.info {
		background: @btnBgInfo;
	}
	&.warning {
		background: @btnBgWarning;
	}
	&.danger {
		background: @btnBgDanger;
	}

	&.is-round {
		border-radius: 12px;
	}
	&.is-outline {
		background: transparent;
		&.primary {
			color: @btnBgPrimary;
		}
		&.success {
			color: @btnBgSuccess;
		}
		&.info {
			color: @btnBgInfo;
		}
		&.warning {
			color: @btnBgWarning;
		}
		&.danger {
			color: @btnBgDanger;
		}
	}
}

.txt-nowrap {
	white-space: nowrap;
}

// 提示性文字样式
.alert-box {
	.txt-h3;
	padding: 10px 10px;
	background: @btnBg;
	color: @btnTxtColor;
}

// 独立完整的内容，文章类详细页面
article,
.detail-content {
	.txt-desc;
	.padding-vh;
	background: @paneBg;
	p {
		padding: 5px 0;
	}
	.item-pic {
		.box-shadow;
		margin: 10px 0;
	}
	.item-time {
		font-size: @l3;
		color: @infoColor;
	}

	.item-content {
		.flex-wrap;
		.align-center;
		font-size: @l3;
		padding: 5px 0;

		label {
			width: 90px;
			color: @titleColor;
		}
	}
}
// 标签规定独立的流内容（图像、图表、照片、代码等等）
figure,
.item-pic {
	overflow: hidden;
	img,
	code {
		display: block;
		width: 100%;
	}
	figcaption {
		.txt-info;
	}
}

// iframe 嵌入外部页面
.iframe-pages {
	.full-size;
	background: @defaultBg;
}
